<template>
    <div>
        <group title="自我评价">
            <x-textarea
                v-model="form.self_assessment"
                @on-blur="onTextareaBlur"
                :rows="5"
                :placeholder="formPlaceholder.self_assessment"
            ></x-textarea>
        </group>
        <group title="在校经历">
            <x-textarea
                v-model="form.association_activity"
                @on-blur="onTextareaBlur"
                :rows="5"
                :placeholder="formPlaceholder.association_activity"
            ></x-textarea>
        </group>
        <group title="项目经历">
            <x-textarea
                v-model="form.project_experience"
                @on-blur="onTextareaBlur"
                :rows="5"
                :placeholder="formPlaceholder.project_experience"
            ></x-textarea>
        </group>
        <group title="实习经历">
            <x-textarea
                v-model="form.internships"
                @on-blur="onTextareaBlur"
                :rows="5"
                :placeholder="formPlaceholder.internships"
            ></x-textarea>
        </group>
        <group title="获奖经历">
            <x-textarea
                v-model="form.honor"
                @on-blur="onTextareaBlur"
                :rows="5"
                :placeholder="formPlaceholder.honor"
            ></x-textarea>
        </group>
        <group title="资格证书">
            <x-textarea
                v-model="form.qualification"
                @on-blur="onTextareaBlur"
                :rows="5"
                :placeholder="formPlaceholder.qualification"
            ></x-textarea>
        </group>
        <group title="职业技能">
            <x-textarea
                v-model="form.skill"
                @on-blur="onTextareaBlur"
                :rows="5"
                :placeholder="formPlaceholder.skill"
            ></x-textarea>
        </group>
        <group title="兴趣爱好">
            <x-textarea
                v-model="form.hobbies"
                @on-blur="onTextareaBlur"
                :rows="5"
                :placeholder="formPlaceholder.hobbies"
            ></x-textarea>
        </group>
        <group title="上传简历（可选）">
            <UploadResume/>
        </group>
        <group style="padding: 0 1rem 1rem;">
            <x-button
                @click.native="onSubmit"
                :disabled="!isValid"
                type="primary"
            >提交微简历
            </x-button>
        </group>
    </div>
</template>

<script>
    import {
        Group,
        XButton,
        XTextarea
    } from 'vux';
    import UploadResume from './UploadResume';

    const RESUME_STORAGE_KEY = 'resume_storage_key';

    export default {
        name: 'EditResume',
        components: {
            UploadResume,
            Group,
            XButton,
            XTextarea
        },

        mounted() {
            this.readResume();
        },

        computed: {
            isValid() {
                for (let key in this.form) {
                    if (!this.form[key]) {
                        return false;
                    }
                }
                return true;
            }
        },

        data() {
            return {
                form: {
                    self_assessment: '', // 自我评价
                    association_activity: '', // 在校经历
                    project_experience: '', // 项目经历
                    internships: '', // 实习经历
                    honor: '', // 获奖经历
                    qualification: '', // 资格证书
                    skill: '', // 职业技能
                    hobbies: '' // 兴趣爱好
                },

                formRules: {
                    self_assessment: [],
                    association_activity: [],
                    project_experience: [],
                    internships: [],
                    honor: [],
                    qualification: [],
                    skill: [],
                    hobbies: []
                },

                formPlaceholder: {
                    self_assessment: '有一说一，客观真实地评价一下你自己',
                    association_activity: '1、任人工智能学会会长\n' +
                        '2、任党支部书记\n' +
                        '3、参加 2019 年武汉军运会志愿者\n……',
                    project_experience: '项目名称、项目时间、项目描述、项目介绍、个人职责……',
                    internships: '城市、时间、部门、职位……',
                    honor: '1、ACM-ICPC 团体冠军\n' +
                        '2、蓝桥杯大赛全国一等奖\n……',
                    qualification: '1、大学英语 6 级（CET-6）\n' +
                        '2、系统架构设计师\n' +
                        '3、教师资格证\n……',
                    skill: '1、精通 Python、Django 等\n' +
                        '2、精通 C++、Go、Java 等\n' +
                        '3、精通 MySQL、Oracle、SqlServer、Redis 等\n……',
                    hobbies: '阅读、音乐、表演、运动……'
                }
            };
        },

        methods: {
            onSubmit() {
                this.$API.applicantRegister.createMicroResume(this.form)
                    .then(() => {
                        this.$router.push({path: '/home'});
                    }, () => {
                    })
                    .finally(() => {
                    });
            },

            onTextareaBlur() {
                this.saveResume();
            },

            saveResume() {
                localStorage.setItem(RESUME_STORAGE_KEY, JSON.stringify(this.form));
            },

            readResume() {
                let resume = localStorage.getItem(RESUME_STORAGE_KEY);
                if (resume) {
                    Object.assign(this.form, JSON.parse(resume));
                }
            }
        }
    };
</script>
